<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入您的任务名称，按回车键确认"
      @keyup.enter="add"
      v-model="title"
    />
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "MyHeader",
  data() {
    return {
      title: "",
    };
  },
  methods: {
    add() {
      if (!this.title.trim()) return;
      const todo = { id: nanoid(), title: this.title, done: false };
      this.$bus.$emit("addtodo", todo);
      this.title = "";
    },
  },
};
</script>

<style scoped>
.todo-header {
  margin-bottom: 25px;
}

.todo-header input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #e5e7eb;
  /* 浅灰边框 */
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  /* 清除默认聚焦边框 */
  transition: border-color 0.3s;
  /* 边框颜色过渡，提升交互反馈 */
}

/* 输入框聚焦状态：蓝色边框，提示当前激活 */
.todo-header input:focus {
  border-color: #4285f4;
  /* 谷歌蓝，柔和不刺眼 */
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
  /* 聚焦阴影，增强视觉焦点 */
}

/* 输入框提示文字样式：浅灰色，不干扰输入 */
.todo-header input::placeholder {
  color: #9ca3af;
  font-size: 15px;
}
</style>
